<template>
	<view class="user-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar">
				<image src="/static/logo.jpg" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.name || '--' }}</text>
				<text class="user-id">ID: {{ userInfo.id || '--' }}</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="menu-list">
			<view v-for="item in menuList" :key="item.title">
				<view class="menu-item" @click="navigateTo(item.url)" v-if="showMenu(item)">
					<image :src="item.icon" class="menu-icon"></image>
					<text>{{ item.title }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>

		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value1: 0,

				// 用户信息
				userInfo: {
					avatar: '',
					name: '',
					id: ''
				},
				menuList: [{
						url: '/pages/contractSign/index',
						title: '发起合同签署',
						icon: '/static/contract-signing.png'
					},
					{
						url: '/pages/auditList/index',
						title: '待审核列表',
						icon: '/static/audit-list.png'
					},
					{
						url: '/pages/contractList/index',
						title: '合同列表',
						icon: '/static/contract-list.png'
					},
					{
						url: '/pages/carList/index',
						title: '采购车辆列表',
						icon: '/static/cg-list.png'
					},
					{
						url: '/pages/testCar/index',
						title: '检测车辆列表',
						icon: '/static/test-list.png'
					},
					{
						url: '/pages/carZb/index',
						title: '整备车辆列表',
						icon: '/static/zb-list.png'
					},
					{
						url: '/pages/rejectList/index',
						title: '驳回车辆列表',
						icon: '/static/reject.png'
					},
					{
						url: '/pages/kgList/index',
						title: '完结车辆列表',
						icon: '/static/end-list.png'
					},
					{
						url: '/pages/userTemplate/index',
						title: '个人模板数据',
						icon: '/static/user_template.png'
					},

					// {
					// 	url: '/pages/templates/index',
					// 	title: '个人模板数据',
					// 	icon: '/static/templates.png'
					// },
					// {
					// 	url: '/pages/templates/index',
					// 	title: '修改密码',
					// 	icon: '/static/pwd.png'
					// }
				]
			}
		},
		computed: {},
		onShow() {},
		onLoad() {
			const name = uni.getStorageSync('name')
			const id = uni.getStorageSync('id')

			this.userInfo.name = name
			this.userInfo.id = id
		},
		methods: {
			click1() {},
			showMenu(item) {
				const qx = uni.getStorageSync('qx')
				if (item.title === '待审核列表') {
					return qx == 7
				} else {
					return true
				}
			},

			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			},
			// menu 跳转
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-container {
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.user-card {
		display: flex;
		align-items: center;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-avatar {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.edit-icon {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			padding: 6rpx 0;
		}
	}

	.user-info {
		display: flex;
		flex-direction: column;

		.user-name {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.user-id {
			font-size: 24rpx;
			color: #999;
		}
	}

	.menu-list {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.menu-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			text {
				flex: 1;
				font-size: 28rpx;
			}
		}
	}

	.logout-btn {
		background-color: #fff;
		color: #ff5a5f;
		text-align: center;
		padding: 30rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>